<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>$resource自定义方法</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
    <script src="../lib/angularjs/angular.js"></script>
    <script src="../lib/angularjs/angular-resource.js"></script>
    <style>body{margin:10px 80px;}</style>
</head>
<body ng-app="app01">
<div class="panel panel-primary" ng-controller="ctrl01">
    <div class="panel-heading"><b>扩展$resource</b></div>
    <div class="panel-body">
        <p class="well">
            <button class="btn bg-success" ng-click="get()">get</button>
            <button class="btn bg-success" ng-click="query()">query</button>
            <button class="btn bg-success" ng-click="create()">create</button>
            <button class="btn bg-success" ng-click="remove()">remove</button>
            <button class="btn bg-success" ng-click="update()">update</button>
        </p>
        <p class="well">{{message}}</p>
    </div>
    <div class="panel-footer">
    </div>
</div>
<div class="panel panel-primary" ng-controller="ctrl02">
    <div class="panel-heading"><b>$resource 设置对象</b></div>
    <div class="panel-body">
        <h4>1. method（字符串）</h4>
        method指的是我们想要用来发送HTTP请求的方法。它必须是以下值之一：‘GET’、‘DELETE’、
        ‘JSONP’、 ‘POST’、 ‘PUT’。
        <h4>2. url（字符串）</h4>
        一个URL，用来覆盖为该方法的具体路由设置的URL。
        <h4>3. params（字符串map或对象）</h4>
        这个键中包含了此动作可选的预绑定参数。如果任何一个值都是函数，那么每当我们需要读取一个请求的参数时，它就会被执行一次。
        <h4>4. isArray（布尔型）</h4>
        如果isArray被设置为true，那么这个动作返回的对象会以数组的形式返回。
        <h4>5. transformRequest（函数或函数数组）</h4>
        这个函数或函数数组用来对HTTP请求的请求体和头信息进行转换，并返回转换后的版本。通常用来进行序列化。
        <xmp>
            var User = $resource('/api/users/:id',{
            id: '@'
            }, {
            sendEmail: {
            method: 'PUT',
            transformRequest: function(data, headerFn) {
            // 返回修改后的请求数据
            return JSON.stringify(data);
            }
            图灵社区会员 鸟月月(dearzpfree@hotmail.com) 专享 尊重版权
            140 第 15 章 同外界通信： XHR 和服务器通信
            }
            });
        </xmp>
        <h4>6. transformResponse（函数或函数数组）</h4>
        这个函数或函数数组用来对HTTP响应体和头信息进行转换，并返回转换后的版本。通常用
        来进行反序列化。
        <xmp>
            var User = $resource('/api/users/:id',{
            id:'@'
            }, {
            sendEmail: {
            method: 'PUT',
            transformResponse: function(data, headerFn)
            {
            // Return modified data for the response
            return JSON.parse(data);
            }
            }
            });
        </xmp>
        <h4>7. cache（布尔型或缓存对象）</h4>
        如果cache属性被设置为true，那么AngularJS会用默认的$http缓存对GET请求进行缓存。
        如果cache属性被设置为$cacheFactory对象的一个实例，那么这个对象会用来对GET请求进行
        缓存。
        如果cache属性被设置为false，那么$resource服务所发送的请求不会被缓存。
        <h4>8. timeout（数值型或promise对象）</h4>
        如果timeout被设置为一个数值，那么请求将会在推迟timeout指定的毫秒数后再发送。如
        果被设置为一个promise对象，那么当该promise对象被resolve时，请求会被中止。
        <h4>9. withCredentials（布尔型）</h4>
        如果该属性被设置为true，那么XHR请求对象中会设置withCredentials标记。
        默认情况下， CORS请求不会发送cookie，而withCredentials标记会在请求中加入AccessControl-Allow-Credentials头，这样请求就会携带目标域的cookie。
        <h4>10. responseType（字符串）</h4>
        responseType选项会在请求中设置XMLHttpRequestResponseType属性。我们可以使用以下
        HTTP请求类型之一：
         " "（字符串，默认）；
         "arraybuffer"（ArrayBuffer）；
         "blob"（blob对象）；
         "document"（HTTP文档）；
         "json"（从JSON对象解析而来的JSON字符串）；
         "text"（字符串）；
         "moz-blob"（Firefox的接收进度事件）；
         "moz-chunked-text"（文本流）；
         "moz-chunked-arraybuffer"（ArrayBuffer流）。
        <h4>11. interceptor（对象）</h4>
        拦截器属性有两个可选的方法： response或responseError。这些拦截器像普通的$http拦
        截器一样，由$http请求对象调用。
    </div>
    <div class="panel-footer">
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">$resourceAPI</div>
    <div class="panel-body">
        <h3>$resourceAPI接收三个参数</h3>
        <h3>
            <p class="alert alert-danger">
                $resource(<span class="text-primary">url</span>,<span class="text-info">paramDefaults</span>,actions);
            </p>
        </h3>
        <div class="well">
            <b class="text-danger">url：</b>我们在这里传入一个包含所有参数的，用来定位资源的参数化URL字符串模板（参数以:符号为前缀） 。对URL中的每个参数，都可以通过它们的名字来为其赋值。<span class="text-danger">这里需要注意，如果:之前的参数是空的（上面例子中的:id），那么URL中的这部分会被压
            缩成一个.符号</span>
        </div>
        <div class="well">
            <b  class="text-danger">paramDefaults（可选，对象）</b>第二个参数中包含了发送请求时URL中参数的默认值。对象中的键会与参数名进行匹配。如果我们传入了一个没有在URL中设置过的参数，那它会以普通的查询字符串的形式被发送。如果要设置动态值，需要在值之前加上@字符作为前缀。
        </div>
        <div class="well">
            <b  class="text-danger">actions（可选，对象）</b>动作对象是具有自定义动作，并且可以对默认的资源动作进行扩展的hash对象。
        </div>
    </div>
    <div class="panel-footer">
        <xmp>
$resource(
    '/api/users/:id.:format',
    {
        format: 'json',
        id: '123'
    }, {
        update: {
        method: 'PUT'
    }
});
        </xmp>
    </div>
</div>
</body>
<script>
    var app=angular.module('app01',["ngResource"]);
</script>
<script>

    app.factory('CompanyService',['$resource', function($resource,baseApiUrl){
        return $resource(baseApiUrl, {}, {
            query: {
                method: "GET",
                url:  (baseApiUrl||"")+'7.3.json/:pageIndex1/:pageSize1',
                params: {},
                isArray: false
            },
            create: { method: "POST" ,url:  (baseApiUrl||"")+'7.3.json/:pageIndex1/:pageSize1',
                isArray: false},
            get: { method: "GET", url:  (baseApiUrl||"")+"7.3.json/?id=:id",
                isArray: true },
            remove: { method: "DELETE", url:  (baseApiUrl||"")+"7.3.json/?id=:id" ,
                isArray: false},
            update: { method: "PUT", url:  (baseApiUrl||"")+'7.3.json/?id=:id' ,
                isArray: false}
        })
    }]);

    app.controller('ctrl01',function ($scope,CompanyService) {
        $scope.page = {
            "pageIndex": 1, "pageSize": 10, "totalCount": 0
        };

        var queryArgs = {
            pageIndex1: $scope.page.pageIndex,
            pageSize1: $scope.page.pageSize
        };
        $scope.query=function () {
            CompanyService.query(queryArgs).$promise.then(function (result) {
                $scope.message=result;
            }, function (result) { //如果失败
                $scope.message="query --> 加载失败 ^_^ "
            });
        }

        //详情页弹窗
        $scope.get = function () {
            CompanyService.get(function (result) {
                $scope.message=result;
            }, function (result) { //如果失败
                $scope.message="get --> 加载失败 ^_^ "
            });
        };

        //详情页弹窗
        $scope.create = function () {
            CompanyService.create(function (result) {
                $scope.message=result;
            }, function (result) { //如果失败
                $scope.message="create --> 加载失败 ^_^ "
            });
        };

        //详情页弹窗
        $scope.remove = function () {
            CompanyService.remove(function (result) {
                $scope.message=result;
            }, function (result) { //如果失败
                $scope.message="remove --> 加载失败 ^_^ "
            });
        };

        //详情页弹窗
        $scope.update = function () {
            CompanyService.update(function (result) {
                $scope.message=result;
            }, function (result) { //如果失败
                $scope.message="update --> 加载失败 ^_^ "
            });
        };

        function successFn(data) {
            $scope.message=data;
        }
        function errorFn(data) {
            $scope.message=data.toString();
        }
    });
</script>
<script>
    app.controller('ctrl02',function ($scope,$resource) {

    });
</script>
</html>